<template>
  <Card>
    <Form ref="searchForm" :label-width="90" :model="searchForm" inline>
      <Form-item label="充电日期：" prop="charging_end_at">
        <DatePicker
          v-model="searchForm.charging_end_at"
          placeholder="请选择日期"
          style="width: 200px"
          type="date"
          @on-change="searchForm.charging_end_at=$event"
        ></DatePicker>
      </Form-item>
      <Form-item label="充电公司：" prop="department">
        <Select
          v-model="searchForm.department"
          clearable
          filterable
          placeholder="选择线路"
          style="width:200px;"
        >
          <Option value="-1">全部</Option>
          <Option value="国网">国网</Option>
          <Option value="汉水">汉水</Option>
        </Select>
      </Form-item>
      <Form-item label="车牌号：" prop="license_plate_num">
        <Input v-model="searchForm.license_plate_num" clearable placeholder="支持模糊搜索" style="width: 200px" type="text"/>
      </Form-item>
      <Form-item style="margin-left:-90px;">
        <Button icon="md-search" type="primary" @click="handleSearch">搜索</Button>
        <Button @click="handleReset">重置</Button>
      </Form-item>
    </Form>
    <div class="btns" style="margin-bottom:10px;">
      <upload-file ref="uploadCardFile" button-name="导入" @on-change="uploadData($event)"></upload-file>
    </div>
    <Table
      :columns="column"
      :data="data"
      :loading="loading"
      border
      size="small"
      stripe></Table>
    <Row class="page" justify="end" type="flex">
      <Page
        :current="searchForm.pageNumber"
        :page-size="searchForm.pageSize"
        :total="total"
        show-total
        @on-change="changePage"/>
    </Row>
    <Modal v-model="modal" :closable="false" :mask-closable="false" width="360">
      <p slot="header" style="color:#2d8cf0;text-align:center">
        <Icon type="ios-information-circle"></Icon>
        <span>文件上传成功，正在导入数据</span>
      </p>
      <div style="text-align:center">
        <Button :loading="importLoading" long size="large" type="error">导入中...</Button>
      </div>
      <div slot="footer"></div>
    </Modal>
  </Card>
</template>
<script>
import UploadFile from '../my-components/upload-file'
import {chargeList, importCharge} from '../../api/charge'

export default {
  components: {
    UploadFile,
  },
  data() {
    return {
      searchForm: {
        license_plate_num: '',
        charging_end_at: '',
        department: '-1',
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
      },
      loading: false,
      data: [],
      modal: false,
      importLoading: false,
      total: 0,
      column: [
        {
          type: 'index',
          width: 60,
          align: 'center',
          fixed: 'left',
        },
        {
          title: '车牌号',
          key: 'license_plate_num',
          align: 'center',
          width: 150,
          fixed: 'left',
          sortable: true,
        },
        {title: '充电公司', key: 'department', align: 'center', width: 260, sortable: true},
        {title: '交易电量', key: 'trading_power', align: 'right', width: 120, sortable: true},
        {
          title: '实扣交易金额',
          key: 'act_trading_amt',
          align: 'right',
          width: 130,
          sortable: true,
        },
        {
          title: '实扣服务费',
          key: 'act_service_fee',
          align: 'right',
          width: 120,
          sortable: true,
        },
        {title: '电费', key: 'power_fee', align: 'right', width: 120, sortable: true},
        {title: '服务费', key: 'service_fee', align: 'right', width: 120, sortable: true},
        {
          title: '优惠金额',
          key: 'discounted_amt',
          align: 'right',
          width: 120,
          sortable: true,
        },
        {
          title: 'E卡抵扣金额',
          key: 'deduction_amt',
          align: 'right',
          width: 130,
          sortable: true,
        },
        {
          title: '充电开始时间',
          key: 'charging_start_at',
          align: 'center',
          width: 150,
          sortable: true,
        },
        {
          title: '充电结束时间',
          key: 'charging_end_at',
          align: 'center',
          width: 150,
          sortable: true,
        },
        {title: '卡号', key: 'card_num', align: 'right', width: 150, sortable: true},
        {title: '是否开票', key: 'is_invoiced', align: 'center', width: 150, sortable: true},
      ],
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    changePage(v) {
      this.searchForm.pageNumber = v
      this.getChargeList()
    },
    getChargeList() {
      this.loading = true
      chargeList(this.searchForm).then((res) => {
        this.loading = false
        if (res.data) {
          this.data = res.data.chargeRecord
          this.total = res.data.count
        }
      })
    },
    handleReset() {
      this.$refs.searchForm.resetFields()
      this.searchForm.pageNumber = 1
      this.searchForm.pageSize = 10
      this.getChargeList()
    },
    handleSearch() {
      this.searchForm.pageNumber = 1
      this.searchForm.pageSize = 10
      this.getChargeList()
    },
    init() {
      this.getChargeList()
    },
    uploadData(event) {
      this.modal = true
      this.importLoading = true
      importCharge({url: event.url, mark: false}).then((res) => {
        this.modal = false
        this.importLoading = false
        if (res.data) {
          this.$Message.success(res.message)
          this.getChargeList()
        } else {
          const message = res.message
          const url = event.url
          this.$Modal.confirm({
            title: '确认导入',
            content: message,
            onOk: () => {
              this.modal = true
              this.importLoading = true
              importCharge({url: url, mark: true}).then((result) => {
                this.modal = false
                this.importLoading = false
                if (result.data) {
                  this.$Message.success(result.message)
                  this.getChargeList()
                }
              })
            },
          })
        }
      })
    },
  },
}
</script>
